<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        /*修改过了*/

        li {
            margin-right: 100px;
            /* 添加元素间隔 */
        }
        .li1{
            margin-left: 90px;
        }
        .b1{
            margin-right: 50px;
        }
        .z1{
            margin-top: 20px;
            
        }
        .t1{

           margin-top: 0.5rem;

        }
        .li2{
            margin-bottom: 80px;
            margin-left: 150px;
        }
        .t2{
            margin-left: -170px;
        }
        .b1{
           background-color: black;
        }
        .text{
           font-weight: 500;
        }
         .img{
            width: 300px;
            height: 220px;
        }
        .i1{
            width: 600px;
        }
        #jt{
            position: relative;

        }
        #left{
            position: absolute;
            top: 120px;
            left: 20px;
            font-size: 50px;
        }
        #right{
            position: absolute;
            top: 120px;
            right: 20px;
            font-size: 50px;
        }
        #shu{
            margin-left: 4rem;
        }
        .c{
            color: black;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg  bg-light n1">
        <a class="navbar-brand" href="index.html"><img src="img/logo.jpeg" alt="..." height="80px" ></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarNav">
            <ul class="navbar-nav li1">
                <li class="nav-item active ">
                    <a class="nav-link" href="jianjie.html">简介 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="yewu.html">业务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="esg.html">ESG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="yuangong.html">员工</a>
                </li>
            </ul>
        </div>
        <form class="form-inline">
            <span id="username" onblur="user()"></span>
            <a href="denglu.html">登录/注册</a>
        </form>
    </nav>
    <hr>
    <div class="container z1" id="jt">
        <img src="" alt="" id="pic" height="300px" class="w-100">
        <div id="left" onclick="left()"><</div>
        <div id="right" onclick="right()">></div>
    </div>
    <div class="b1 container z1" id="shu">
    <div class=" z1 nav nav-tab">
        <ul class="nav flex-column t2 ">
            <li class="nav-item ">
              <a class="nav-link active li2 z1 text dyl" href="#li1" data-toggle="tab" onclick="openCity(event,'div1')"><h2 class="">连接用户与生活</h2></a>
            </li>
            <li class="nav-item ">
              <a class="nav-link li2 dyl" href="#li2" data-toggle="tab" onclick="openCity(event,'div2')"><h2 class="">连接企业与科技</h2></a>
            </li>
            <li class="nav-item ">
              <a class="nav-link li2 dyl" href="#li3" data-toggle="tab" onclick="openCity(event,'div3')"><h2 class="">连接现在与未来</h2></a>
            </li>
          </ul>
          <div class="tab-content" >
            <div class="tab-pane fade show active" id="div1">
                <table class="t1">
                <tr >
                    <td><img src="./img/1.png" alt="" class="img"></td>
                    <td><img src="./img/2.png" alt="" class="img"></td>
                </tr>
                <tr>
                    <td><img src="./img/3.png" alt=""class="img"></td>
                    <td><img src="./img/4.png" alt=""class="img"></td>
                </tr>
            </table>
            </div>
            <div class="tab-pane fade show active" id="div2" style="display: none;">
                <table class="t1" >
                    <tr >
                        <td><img src="./img/5.png" alt="" class="img"></td>
                        <td><img src="./img/6.png" alt="" class="img"></td>
                    </tr>
                        
                </table>
                <img src="./img/7.png" alt="" width="600px">
            </div>
            <div class="tab-pane fade show active" id="div3" style="display: none;">
                <table class="t1">
                    <tr >
                        <td><img src="./img/8.png" alt="" class="img"></td>
                        <td><img src="./img/9.png" alt="" class="img"></td>
                    </tr>
                    <tr>
                        <td><img src="./img/10.png" alt=""class="img"></td>
                        <td><img src="./img/11.png" alt=""class="img"></td>
                    </tr>
                </table>
            </div>
          </div>
    </div>
</div>
<div  style="margin-top: 100px; margin-bottom: 10px;">
    <div class="row">
            <ul class="nav" style="margin-left: 150px;">
                <li class="nav-item" style="text-align: center;">
                    <h4 style="margin-bottom: 20px;">加入我们</h4><br><br>
                    <a style="margin-top: 20px;" href="#" class="c">校园招聘</a><br><br>
                    <a style="margin-top: 20px;"href="#" class="c">社会招聘</a><br><br>
                    <a style="margin-top: 20px;"href="#" class="c">国际招聘</a>
                </li>
                <li class="nav-item" style="text-align: center;">
                    <h4 style="margin-bottom: 20px;">联系我们</h4><br><br>
                    <a href="#" class="c">客户服务</a><br><br>
                    <a href="#" class="c">合作洽谈</a><br><br>
                    <a href="#" class="c">腾讯采购</a><br><br>
                    <a href="luyan.html">您的建议</a>
                </li>
                <li class="nav-item" style="text-align: center;">
                    <h4 style="margin-bottom: 20px;">法律信息</h4><br><br>
                    <a href="#" class="c">服务协议</a><br><br>
                    <a href="#" class="c">隐私政策</a><br><br>
                    <a href="" class="c">知识产权</a>
                </li>
                <li>
                    <img src="./img/logo.jpeg" alt="" class="w-100" height="200px">
                </li>
            </ul>      
    </div>       
</div>
    <script src="./JS/index.js"></script>
</body>

</html>